<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../stadium-service/stadium-service.html">
<link rel="import" href="stadium-card.html">

<polymer-element name="stadium-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    stadium-card {
      margin-bottom: 30px;
    }
    </style>

    <stadium-service id="service" stadiums="{{stadiums}}">
    </stadium-service>
    
    <div layout vertical center>

      <template repeat="{{stadium in stadiums}}">
    <stadium-card
      favorite="{{stadium.favorite}}"
      on-favorite-tap="{{handleFavorite}}"
      hidden?="{{show == 'favorites' && !stadium.favorite}}">

          <img src="{{stadium.avatar}}" width="70" height="70">
          <h2>{{stadium.username}}</h2>
          <p>{{stadium.text}}</p>
        </stadium-card>
      </template>
      
    </div>
  </template>
  <script>
  Polymer({
	  handleFavorite: function(event, detail, sender) {
	    var stadium = sender.templateInstance.model.stadium;
	    this.$.service.setFavorite(stadium.uid, stadium.favorite);
	  }
	});
  </script>
</polymer-element>
